<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="创建档案"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<view v-if="!success">
				<view @click="toList" class="dawn-box">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center">
						<!-- <tn-avatar :src="userInfo.avatar" size="90rpx"></tn-avatar> -->
						<view class="tn-padding-left-xs">
							<view class="dawn-text-sm" v-if="userInfo.nickname">
								若您或您的家人已有健康卡，可授权相关信息，快速申领
							</view>
						</view>
					</view>
					<view class="tn-padding-left-xs">
						<tn-button @click="nav('/hosp/patient/create?toAuth=1')" shadow
							class="dawn-btn dawn-btn-lg__main" style="width: 100% !important;">
							<text class="tn-icon-cardbag tn-padding-right-ss"></text>
							<text class="tn-text-ellipsis">选卡关联</text>
						</tn-button>
					</view>
				</view>

				<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-my-fill"></text>
							<view class="list__left__text">姓名</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.name || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-identity-fill"></text>
							<view class="list__left__text">身份证</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.cardNo || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-phone-fill "></text>
							<view class="list__left__text">手机号</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.phone || '' }}
						</view>
					</view>
					<!-- <view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-expand"></text>
							<view class="list__left__text">门诊号</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.clinicNo || '' }}
						</view>
					</view> -->
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-font"></text>
							<view class="list__left__text">健康卡</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ strMask(formData.ehealthCardId)  || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-sex"></text>
							<view class="list__left__text">性别</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.patientSex || '' }}
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-calendar-fill"></text>
							<view class="list__left__text">生日</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.birthday || '' }}
						</view>
					</view>
					<!-- <view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-time-fill"></text>
							<view class="list__left__text">年龄</view>
						</view>
						<view class="list__right list-icon-text__right">
							{{ formData.patientAge || '' }}
						</view>
					</view> -->
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-module-fill"></text>
							<view class="list__left__text">民族</view>
						</view>
						<view class="list__right list-icon-text__right" @click="showNation = true">
							{{ formData.nation || '请选择民族' }}
							<text class="tn-icon-right tn-padding-left-ss"></text>
							<tn-select v-model="showNation" :searchShow="false" title="请选择民族" :list="nationList"
								@cancel="showNation = false" @confirm="onSelect($event,'nation')">
							</tn-select>
						</view>
					</view>
					<view class="list-icon-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-theme-fill"></text>
							<view class="list__left__text">职业</view>
						</view>
						<view class="list__right list-icon-text__right" @click="showProfession = true">
							{{ formData.professionName || '请选择职业' }}
							<text class="tn-icon-right tn-padding-left-ss"></text>
							<tn-select v-model="showProfession" :searchShow="false" title="请选择职业" :list="professionList"
								@cancel="showProfession = false" @confirm="onSelect($event,'profession')">
							</tn-select>
						</view>
					</view>
					<view class="list-icon-text" style="display: block;">
						<view class="list__left">
							<text class="list__left__icon tn-icon-map-fill"></text>
							<view class="list__left__text">地址</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<textarea v-model="formData.address" placeholder="请填写地址"
								placeholder-style="color:#AAAAAA"></textarea>
						</view>
					</view>
				</view>

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="submitForm()" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-iot-fill tn-padding-right-xs"></text>
							<text>关联档案</text>
						</tn-button>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :box="dawnBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<view v-if="success" class="dawn-success">
			<image mode="aspectFit" class="dawn-success__image" src="../../static/images/icon_ondata.png"></image>
			<view class="dawn-success__title">
				{{ msg }}
			</view>
			<view class="dawn-success__btn">
				<tn-button @click="nav('/hosp/register/dept')" class="dawn-btn-lg dawn-btn-lg__primary">
					<text class="tn-icon-calendar-fill tn-padding-right-xs"></text>
					<text>预约挂号</text>
				</tn-button>
			</view>
			<view class="dawn-success__btn">
				<tn-button @click="nav('/hosp/outpatient/query')" class="dawn-btn-lg dawn-btn-lg__pay">
					<text class="tn-icon-money-fill tn-padding-right-xs"></text>
					<text>门诊缴费</text>
				</tn-button>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as UserPatient from '@/libs/userPatient.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import eHealth from "@/libs/eHealth.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'create',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				dawnBox: 'popup',
				loading: false,
				show: false,
				success: false,
				msg: '',
				formData: {},
				list: [],
				showNation: false,
				nationList: [{
						value: 1,
						label: '汉族'
					},
					{
						value: 2,
						label: '蒙古族'
					},
					{
						value: 3,
						label: '回族'
					},
					{
						value: 4,
						label: '藏族'
					},
					{
						value: 5,
						label: '维吾尔族'
					},
					{
						value: 6,
						label: '苗族'
					},
					{
						value: 7,
						label: '彝族'
					},
					{
						value: 8,
						label: '壮族'
					},
					{
						value: 9,
						label: '布依族'
					},
					{
						value: 10,
						label: '朝鲜族'
					},
					{
						value: 11,
						label: '满族'
					},
					{
						value: 12,
						label: '侗族'
					},
					{
						value: 13,
						label: '瑶族'
					},
					{
						value: 14,
						label: '白族'
					},
					{
						value: 15,
						label: '土家族'
					},
					{
						value: 16,
						label: '哈尼族'
					},
					{
						value: 17,
						label: '哈萨克族'
					},
					{
						value: 18,
						label: '傣族'
					},
					{
						value: 19,
						label: '黎族'
					},
					{
						value: 20,
						label: '傈僳族'
					},
					{
						value: 21,
						label: '佤族'
					},
					{
						value: 22,
						label: '畲族'
					},
					{
						value: 23,
						label: '高山族'
					},
					{
						value: 24,
						label: '拉祜族'
					},
					{
						value: 25,
						label: '水族'
					},
					{
						value: 26,
						label: '东乡族'
					},
					{
						value: 27,
						label: '纳西族'
					},
					{
						value: 28,
						label: '景颇族'
					},
					{
						value: 29,
						label: '柯尔克孜族'
					},
					{
						value: 30,
						label: '土族'
					},
					{
						value: 31,
						label: '达翰尔族'
					},
					{
						value: 32,
						label: '么佬族'
					},
					{
						value: 33,
						label: '羌族'
					},
					{
						value: 34,
						label: '布朗族'
					},
					{
						value: 35,
						label: '撒拉族'
					},
					{
						value: 36,
						label: '毛南族'
					},
					{
						value: 37,
						label: '仡佬族'
					},
					{
						value: 38,
						label: '锡伯族'
					},
					{
						value: 39,
						label: '阿昌族'
					},
					{
						value: 40,
						label: '普米族'
					},
					{
						value: 41,
						label: '塔吉克族'
					},
					{
						value: 42,
						label: '怒族'
					},
					{
						value: 43,
						label: '乌孜别克族'
					},
					{
						value: 44,
						label: '俄罗斯族'
					},
					{
						value: 45,
						label: '鄂温克族'
					},
					{
						value: 46,
						label: '德昂族'
					},
					{
						value: 47,
						label: '保安族'
					},
					{
						value: 48,
						label: '裕固族'
					},
					{
						value: 49,
						label: '京族'
					},
					{
						value: 50,
						label: '塔塔尔族'
					},
					{
						value: 51,
						label: '独龙族'
					},
					{
						value: 52,
						label: '鄂伦春族'
					},
					{
						value: 53,
						label: '赫哲族'
					},
					{
						value: 54,
						label: '门巴族'
					},
					{
						value: 55,
						label: '珞巴族'
					},
					{
						value: 56,
						label: '基诺族'
					},
					{
						value: 57,
						label: '穿青人'
					}
				],
				showProfession: false,
				professionList: [{
					value: '11',
					label: '国家公务员'
				}, {
					value: '27',
					label: '农民'
				}, {
					value: '37',
					label: '现役军人'
				}, {
					value: '51',
					label: '自由职业者'
				}, {
					value: '54',
					label: '个体经营者'
				}, {
					value: '80',
					label: '退(离)休人员'
				}, {
					value: '90',
					label: '其他'
				}, {
					value: '70',
					label: '无业人员'
				}, {
					value: '13',
					label: '专业技术人员'
				}, {
					value: '17',
					label: '职员'
				}, {
					value: '21',
					label: '企业管理人员'
				}, {
					value: '24',
					label: '工人'
				}, {
					value: '31',
					label: '学生'
				}, {
					value: '20',
					label: '教师'
				}, {
					value: '22',
					label: '公务员'
				}, {
					value: '23',
					label: '医生'
				}, {
					value: '24',
					label: '其他'
				}]
			}
		},
		onLoad(options) {
			// this.formData.patientSex = '男';
			// this.formData.ehealthCardId = '424323214124';
			// this.formData.name = '杨玉华';
			// this.formData.phone = '15288375930';
			// this.formData.cardNo = '532901199012183230';
			// this.formData.idCard = '532901199012183230';
			// this.formData.birthday = '1990-12-18';
			// this.formData.address = '润城';

			if (!this.isLogin || !this.userInfo.id) {
				this.loading = true;
				toLogin();
			} else {
				let that = this;
				let urlData = location.pathname;
				that.loading = true;
				if (options.hasOwnProperty('toAuth')) {
					// that.loading = false;
					uni.setStorageSync('create_back_url', options.toAuth);
					eHealth.toList(urlData);
				} else if (options.hasOwnProperty('healthCode')) {
					const healthCode = options.healthCode;
					if (healthCode !== '0') {
						const queryData = new Object();
						queryData.healthCode = healthCode;
						PatientApi.eHealthInfo(queryData).then(res => {
							if (res.code === 0) {
								that.loading = false;
								uni.showToast({
									title: '获取电子健康卡成功',
									icon: 'none'
								})
								that.toFormData(res.data);
							} else {
								uni.showToast({
									title: '获取电子健康卡失败' + res.msg,
									icon: 'none'
								})
							}
						}).catch(error => {
							console.table(error);
							that.loading = false;
						});
					} else {
						eHealth.toCreate(urlData);
					}
				} else {
					that.loading = false;
				}
			}
		},
		methods: {
			toList() {
				let urlData = location.pathname;
				eHealth.toList(urlData);
			},
			toCreate() {
				let urlData = location.pathname;
				eHealth.toCreate(urlData);
			},
			toFormData(data) {
				this.formData = data;
				this.formData.patientSex = data.gender;
				this.formData.ehealthCardId = data.healthCardId;
				this.formData.phone = data.phone1;
				this.formData.cardNo = data.idCard;
				if (this.formData.nation === '未知') {
					this.formData.nation = '';
				}
			},
			submitForm: function() {
				let that = this;
				if (!this.formData.name) {
					return this.$util.Tips({
						title: '请申领电子健康卡'
					});
				}

				if (!this.formData.nation) {
					return this.$util.Tips({
						title: '请选择民族'
					});
				}

				if (!this.formData.professionName) {
					return this.$util.Tips({
						title: '请选择职业'
					});
				}

				this.loading = true;
				this.show = false;
				this.formData.userId = this.userInfo.id;
				this.formData.openid = this.userInfo.openid;
				PatientApi.create(this.formData).then(res => {
					that.loading = false;
					console.table(res);
					if (res.code === 0) {
						that.$store.commit("UPDATE_PATIENTINFO", res.data);
						UserPatient.getUserPatient(that.userInfo.openid);
						let backUrl = uni.getStorageSync('create_back_url');
						if (backUrl && backUrl !== '1') {
							location.replace(backUrl);
						} else {
							that.success = true;
							that.msg = '就诊人档案创建成功';
						}
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
				})
			},
			navLink(url) {
				uni.navigateTo({
					url: url
				})
			},
			navDel(item) {
				uni.navigateTo({
					url: '/hosp/outpatient/unpay_recipe?registerNo=' + item.NO
				})
			},
			onSelect(event, type) {
				console.table(event);
				if ("nation" === type) {
					// this.queryData.status = event[0]['value'];
					// this.queryData.statusText = event[0]['label'];	
					this.formData.nation = event[0]['label'];
				} else if ("profession" === type) {
					this.formData.professionName = event[0]['label'];
				}
			},
			strMask(str) {
				return this.$util.strMask(str, 6);
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-icon-text,
	.list-image-text {
		padding: 20rpx 5rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}
</style>